<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<div class="rightButton">
            <el-button size="small" type="primary" @click="hotOnOff()">{{hotOnOffTxt}}</el-button>
						<el-button size="small" type="primary" @click="onOff()">{{onOffTxt}}</el-button>
					</div>
					<div class="taskInfo">
						<div class="rightButton">
							<el-button size="small" type="primary" @click="editPart1()">{{buttonTxt1}}</el-button>
						</div>
						<el-form ref="form" :model="ware" label-width="150px">
							<div class="taskInfo">
                <div v-if="ware.catLev1==3">
                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="商品编号：">
                        <span>{{ware.id}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="商品名称：">
                        <el-input v-model="ware.name" placeholder="请输入商品名称" v-show="isEditPart1"></el-input>
                        <span v-show="!isEditPart1">{{ware.name}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="一级品类：">
                        <el-select v-show="isEditPart1" v-model="ware.catLev1" @change="selectLev1()">
                          <el-option
                          v-for="lev in lev1s"
                          :key="lev.id"
                          :label="lev.name"
                          :value="lev.id">
                          </el-option>
                        </el-select>
                        <span v-show="!isEditPart1">{{ware.cat1Name}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="二级品类：">
                        <el-select v-show="isEditPart1" v-model="ware.categoryId">
                          <el-option
                          v-for="lev in lev2s"
                          :key="lev.id"
                          :label="lev.name"
                          :value="lev.id">
                          </el-option>
                        </el-select>
                        <span v-show="!isEditPart1">{{ware.cat2Name}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="销售价格：">
                        <el-input v-model="ware.price" placeholder="请输入销售价格" v-show="isEditPart1">
                          <template slot="append">糖果币</template>
                        </el-input>
                        <span v-show="!isEditPart1">{{ware.price}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="红包金额：">
                        <el-input v-model="ware.money" placeholder="请输入红包金额" v-show="isEditPart1">
                          <template slot="append">人民币(元)</template>
                        </el-input>
                        <span v-show="!isEditPart1">{{ware.money}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="商户：">
                        <el-select v-model="ware.venderId" placeholder="请选择商户" v-show="isEditPart1">
                          <el-option
                          v-for="v in venders"
                          :key="v.id"
                          :value="v.id"
                          :label="v.name">
                          </el-option>
                        </el-select>
                        <span  v-show="!isEditPart1">{{ware.venderName}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="当前库存：">
                        <el-input v-model="ware.stock" placeholder="请输入当前库存" v-show="isEditPart1">
                        </el-input>
                        <span v-show="!isEditPart1">{{ware.stock}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="兑换规则：">
                        <el-select v-model="ware.sendType" placeholder="请选择规则" v-show="isEditPart1">
                          <el-option
                            v-for="v in redPacketTypes"
                            :key="v.id"
                            :value="v.id"
                            :label="v.name">
                          </el-option>
                        </el-select>
                        <span  v-show="!isEditPart1">{{ware.sendTypeName}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="上架时间：">
                        <el-date-picker
                          v-model="ware.onsaleTime"
                          type="datetime"
                          placeholder="选择上架时间" v-show="isEditPart1">
                        </el-date-picker>
                        <span v-show="!isEditPart1">{{dateFormat(ware.onsaleTime)}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>

                <div v-else>
                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="商品编号：">
                        <span>{{ware.id}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="商品名称：">
                        <el-input v-model="ware.name" placeholder="请输入商品名称" v-show="isEditPart1"></el-input>
                        <span v-show="!isEditPart1">{{ware.name}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="一级品类：">
                        <el-select v-show="isEditPart1" v-model="ware.catLev1" @change="selectLev1()">
                          <el-option
                            v-for="lev in lev1s"
                            :key="lev.id"
                            :label="lev.name"
                            :value="lev.id">
                          </el-option>
                        </el-select>
                        <span v-show="!isEditPart1">{{ware.cat1Name}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="二级品类：">
                        <el-select v-show="isEditPart1" v-model="ware.categoryId">
                          <el-option
                            v-for="lev in lev2s"
                            :key="lev.id"
                            :label="lev.name"
                            :value="lev.id">
                          </el-option>
                        </el-select>
                        <span v-show="!isEditPart1">{{ware.cat2Name}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="销售价格：">
                        <el-input v-model="ware.price" placeholder="请输入销售价格" v-show="isEditPart1">
                          <template slot="append">糖果币</template>
                        </el-input>
                        <span v-show="!isEditPart1">{{ware.price}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="参考价格：">
                        <el-input v-model="ware.referencePrice" placeholder="请输入参考价格" v-show="isEditPart1">
                          <template slot="append">人民币(元)</template>
                        </el-input>
                        <span v-show="!isEditPart1">{{ware.referencePrice}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="商户：">
                        <el-select v-model="ware.venderId" placeholder="请选择商户" v-show="isEditPart1">
                          <el-option
                            v-for="v in venders"
                            :key="v.id"
                            :value="v.id"
                            :label="v.name">
                          </el-option>
                        </el-select>
                        <span  v-show="!isEditPart1">{{ware.venderName}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="当前库存：">
                        <el-input v-model="ware.stock" placeholder="请输入当前库存" v-show="isEditPart1">
                        </el-input>
                        <span v-show="!isEditPart1">{{ware.stock}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                  <el-col :span="11">
                    <el-form-item label="上架时间：">
                      <el-date-picker
                        v-model="ware.onsaleTime"
                        type="datetime"
                        placeholder="选择上架时间" v-show="isEditPart1">
                      </el-date-picker>
                      <span v-show="!isEditPart1">{{dateFormat(ware.onsaleTime)}}</span>
                    </el-form-item>
                  </el-col>
                  </el-row>
                </div>
							</div>

							<div class="rightButton">
								<el-button size="small" type="primary" @click="editPart2()">{{buttonTxt2}}</el-button>
							</div>

							<div class="taskInfo">
								<el-form-item label="商品图片：">
									<el-upload
									class="upload-demo"
									v-bind:action="uploadWareUrl"
									:on-remove="handleRemove"
									:on-success="handleSuccess"
									:on-error="handleError"
									:limit="5"
									:file-list="fileListWare"
									list-type="picture">
										<el-button size="small" type="primary" v-show="isEditPart2">点击上传</el-button>
									</el-upload>
								</el-form-item>

								<el-form-item label="商品描述：">
									<el-input type="textarea" v-model="ware.description" placeholder="请输入商品描述"  v-show="isEditPart2"></el-input>
									<span v-show="!isEditPart2">
										{{ware.description}}
									</span>
								</el-form-item>


								<el-form-item label="运营图片：">
									<el-upload
									class="upload-demo"
									v-bind:action="uploadWareManUrl"
									:on-remove="handleRemove"
									:on-success="handleSuccess"
									:on-error="handleError"
									:limit="5"
									:file-list="fileListWareMan"
									list-type="picture">
										<el-button size="small" type="primary" v-show="isEditPart2">点击上传</el-button>
									</el-upload>
								</el-form-item>
							</div>

							<el-form-item>
								<el-button @click="reback()">返回</el-button>
							</el-form-item>
						</el-form>
					</div>

				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../Navigation'
	import BreadCrumb from '../BreadCrumb'
	// 配置API接口地址
	import config from "../../config.json"
	const Root = config.API_HOST;
	export default{
		name:'WareDetail',
		methods: {
			dateFormat(time) {
				if(time==null){
					return null;
				}
				var date=new Date(time);
				var year=date.getFullYear();
				/* 在日期格式中，月份是从0开始的，因此要加0
				* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				* */
				var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
				var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
				var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
				var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
				var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
				// 拼接
				return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
			},
			selectLev1(){
				var that = this;
				that.lev2s = [];
				this.$api.get('/category/findByParentId/'+that.ware.catLev1,null,function(data){
					if(data.flag=="success"){
						for(var i=0;i<data.data.length;i++){
							that.lev2s.push({
								"id":data.data[i].id,
								"name":data.data[i].name
							});
						}
					} else{
						this.$message.error(data.msg);
					}
				});
			},
      //更改上下架状态方法
			onOff(){
				var that = this;
				var temp = this.ware.status==1?this.ware.status=0:this.ware.status=1;
				this.$api.post('/shop/onOff/'+this.ware.id+'/'+temp,null,function(data){
					if(data.flag=="success"){
						that.$message({
							message: temp==0?"商品下架成功":"商品上架成功",
							type: 'success'
						});
					} else{
						this.$message.error('上下架失败');
					}
				});
			},
      //更改热销状态
      hotOnOff(){
			  var that = this;
        var temp = this.ware.hotStatus==1?this.ware.hotStatus=0:this.ware.hotStatus=1;
        this.$api.post('/shop/hotOnOff/'+this.ware.id+'/'+temp,null,function(data){
          if(data.flag=="success"){
            that.$message({
              message: temp==0?"取消热销成功":"设置热销成功",
              type: 'success'
            });
          } else{
            this.$message.error('设置热销失败');
          }
        });
      },
			editPart1(){
				if(this.isEditPart1){
					this.saveWare();
					this.isEditPart1 = false;
					this.buttonTxt1 = "修改";
				} else{
					this.isEditPart1 = true;
					this.buttonTxt1 = "保存";
				}
			},
			editPart2(){
				if(this.isEditPart2){
					this.saveWare();
					this.isEditPart2 = false;
					this.buttonTxt2 = "修改";
				} else{
					this.isEditPart2 = true;
					this.buttonTxt2 = "保存";
				}
			},
			handleSuccess(response, file, fileList){
				if(response.flag=="success"){
					this.ware.wareImages.push(response.data.id);
				}
			},
			handleRemove(file,fileList){
				var temp = file.id==undefined?file.response.data.id:file.id;
				for(var i=0;i<this.ware.wareImages.length;i++){
					if(this.ware.wareImages[i]==temp){
						this.ware.wareImages.splice(i,1);
						break;
					}
				}
			},
			handleError(){
				this.$message.error('上传图片失败');
			},
			reback(){
				this.$router.push('/ware/list');
			},
      //保存修改方法
			saveWare(){
				var that = this;
				this.$api.post('/shop/update',that.ware,function(data){
					if(data.flag=="success"){
						that.$message({
							message: "保存成功",
							type: 'success'
						});
					} else{
						that.$message.error(data.msg);
					}
				});
			},
      //初始化请求加载图片
			loadImageByType(biz,type){
				var that = this;
				this.$api.get('/shop/image/'+biz+'/'+type,null,function(data){
					if(data.flag=="success"){
						for(var i=0;i<data.data.length;i++){
							that.ware.wareImages.push(data.data[i].id);
							if(type==1){
								that.fileListWare.push({
									"url":data.data[i].url,
									"id":data.data[i].id,
									"name":data.data[i].name
								})
							} else if(type==2){
								that.fileListWareMan.push({
									"url":data.data[i].url,
									"id":data.data[i].id,
									"name":data.data[i].name
								})
							}
						}

					} else{
						that.$message.error(data.msg);
					}
				});
			}
		},
		mounted(){
			var that = this;
			this.$api.get('/category/findByParentId/0',null,function(data){
				if(data.flag=="success"){
					for(var i=0;i<data.data.length;i++){
						that.lev1s.push({
							"id":data.data[i].id,
							"name":data.data[i].name
						});
					}
				} else{
					this.$message.error(data.msg);
				}
			});

			this.$api.get('/vender/getAll',null,function(data){
				if(data.flag=="success"){
					for(var i=0;i<data.data.length;i++){
						that.venders.push({
							"id":data.data[i].id,
							"name":data.data[i].name
						});
					}
				} else{
					this.$message.error(data.msg);
				}
			});

			this.$api.get('/shop/get/'+that.$route.params.id,null,function(data){
				if(data.flag=="success"){
					that.ware = data.data;
					console.log(data.data)
					that.ware.wareImages = [];
					that.loadImageByType(data.data.id,1);
					that.loadImageByType(data.data.id,2);
					that.$api.get('/category/findByParentId/'+data.data.catLev1,null,function(result){
						if(result.flag=="success"){
							for(var i=0;i<result.data.length;i++){
								that.lev2s.push({
									"id":result.data[i].id,
									"name":result.data[i].name
								});
							}
						} else{
							this.$message.error(data.msg);
						}
					});
				} else{
					this.$message.error(data.msg);
				}
			});
		},
		data:function(){
			return {
				uploadWareUrl:Root+"/shop/image/upload/1",
				uploadWareManUrl:Root+"/shop/image/upload/2",
				isEditPart1:false,
				isEditPart2:false,
				buttonTxt1:"修改",
				buttonTxt2:"修改",
				lev1s:[],
				lev2s:[],
				venders:[],
				fileListWare:[],
				fileListWareMan:[],
				navs:["兑换商城管理","商品列表","商品详情"],
        redPacketTypes:this.GLOBAL.redPacketTypes,
				ware:{
					catLev1:"",
					categoryId:"",
					name:"",
					status:"",
					onsaleTime:"",
					price:"",
					stock:"",
					venderId:"",
					description:"",
					wareImages:[],
          hotStatus:"",
          money:"",
          sendType:"",
          referencePrice:""
				}
			}
		},
		computed:{
			onOffTxt(){
				return this.ware.status==1?"下架该商品":"上架该商品"
			},
      hotOnOffTxt(){
        return this.ware.hotStatus==1?"取消热销商品":"设为热销商品"
      }
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>
	.taskInfo{
		padding: 20px;
		border: 1px solid #dddddd;
		margin-bottom: 20px;
	}
	#changePercent{
		width: 110px !important;
	}
	.rightButton{
		text-align: right;
		margin-bottom: 10px;
	}
</style>
